<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口文档</title>

    <link href="css/layout.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="js/tdesign/tdesign.min.css" rel="stylesheet">
    <link href="js/highlight/default.min.css" rel="stylesheet">
    <link href="css/markdown.css" rel="stylesheet">

    <script src="js/vue/vue.global.prod.js"></script>
    <script src="js/vue/vue-router.global.prod.js"></script>
    <script src="js/tdesign/tdesign.min.js"></script>
    <script src="js/highlight/highlight.min.js"></script>
    <script src="js/markdown-it/markdown-it.min.js"></script>
    <script src="js/axios/axios.min.js"></script>

</head>
<body>
<div id="app">
    <div class="main">
        <div class="main_inner">
            <!--begin panel-->
            <div class="panel">
                <div class="search_bar">
                    <i class="oim_chat_search"></i>
                    <input @keyup="onSearchChange"
                           v-model="searchText"
                           class="frm_search input-placeholder"
                           type="text"
                           placeholder="搜索：空格分隔多个关键字">
                    <i v-if="showSearchClear" @click="clearSearch" class="search_bar_close"></i>
                </div>
                <!--begin nav view-->
                <div class="nav_view" style="width: auto;padding-left: 15px">
                    <div class="scroll-wrapper contact_list scrollbar"
                         style="overflow-y:auto;height: 100%; padding-bottom: 10px">
                        <t-tree
                                activable
                                hover
                                line
                                expand-on-click-node
                                expand-parent
                                :keys="{ value: 'key', label: 'title', children: 'children' }"
                                :data="indexTree"
                                @onChange="onIndexSelect"
                                :filter="indexFilter"
                                v-model:expanded="menuIndexExpands"
                                v-model:actived="menuIndexActives"
                        >
                        </t-tree>
                        <t-tree
                                activable
                                hover
                                line
                                expand-on-click-node
                                expand-parent
                                :keys="{ value: 'key', label: 'title', children: 'children' }"
                                :data="actionTree"
                                @active="onModuleSelect"
                                :filter="actionFilter"
                                v-model:expanded="menuActionExpands"
                                v-model:actived="menuActionActives"
                        >
                        </t-tree>
                    </div>
                </div>
                <!--end nav view-->
            </div>

            <!--end panel-->
            <div class="" style="height:100%; background-color: rgba(250,250,250,0.6);">
                <router-view></router-view>
            </div>
        </div>
    </div>

</div>
<template id="content">
    <div class="box">
        <div class="box_bd" class="scroll-wrapper contact_list scrollbar" style="overflow-y:auto;">
            <t-card :title="'详细信息'" header-bordered hover-shadow :style="{ width: '100%' }">
                <template #actions>
                    <a href="javascript:void(0)" @click="showMarkdown = true">查看Markdown原始内容</a>
                </template>
                <div v-highlight>
                    <div class="markdown" class="markdown" v-html='action.content'></div>
                </div>
            </t-card>
        </div>
        <t-drawer v-model:visible="showMarkdown" header="Markdown原始内容" :close-btn="true" :footer="false" size="60%">
            <textarea readonly style="width:100%;height: 100%">{{action.markdown}}</textarea>
        </t-drawer>
    </div>
</template>
<script>
    let http = {};
    http.get = function (url, params, back) {
        // url = 'http://127.0.0.1:8000/doc/' + url;
        axios.get(url, params)
            .then(function (response) {
                if (back) {
                    if (typeof (back) === 'function') {
                        let data = response.data;
                        let value = (typeof (data) === 'string') ? data = JSON.parse(data) : data;
                        back(value);
                    }
                }
            })
            .catch(function (error) {

            });
    }
</script>
<script>
    const {createApp, ref} = Vue;

    let md = window.markdownit();
    md.options.html = true;

    let highlight = {};
    // 自定义插件
    highlight.install = function (vue) {
        // 自定义指令 v-highlight
        vue.directive('highlight', {
            // 被绑定元素插入父节点时调用
            mounted: function (el) {
                let blocks = el.querySelectorAll('pre code');
                for (let i = 0; i < blocks.length; i++) {
                    hljs.highlightBlock(blocks[i]);
                }
            },
            // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
            updated: function (el) {
                let blocks = el.querySelectorAll('pre code');
                for (let i = 0; i < blocks.length; i++) {
                    hljs.highlightBlock(blocks[i]);
                }
            }
        })
    };

    const indexActives = [];
    const actionActives = [];
    const indexExpands = [];
    const actionExpands = [];

    const typeAction = 'action';
    const typeIndex = 'index';

    const contentComponent = {
        data: function () {
            return {
                showMarkdown: false,
                action: {
                    content: '',
                    title: '',
                    markdown: '',
                }
            };
        },
        template: '#content',
        mounted() {
            // console.log(this.$route.query)
            let key = this.$route.query.key;
            let type = this.$route.query.type;
            if (key) {
                let own = this;

                if (typeAction === type) {
                    if (actionActives.indexOf(key) < 0) {
                        actionActives.push(key);
                    }
                    if (actionExpands.indexOf(key) < 0) {
                        actionExpands.push(key);
                    }
                    own.loadAction(key);
                }
                if (typeIndex === type) {
                    if (indexActives.indexOf(key) < 0) {
                        indexActives.push(key);
                    }

                    if (indexExpands.indexOf(key) < 0) {
                        indexExpands.push(key);
                    }
                    own.loadIndex(key);
                }
            }
        },
        watch: {
            '$route.query.key'(key) {
                if (key) {
                    let type = this.$route.query.type;
                    let own = this;
                    if (typeAction === type) {
                        own.loadAction(key);
                    }
                    if (typeIndex === type) {
                        own.loadIndex(key);
                    }
                }
            }
        },
        methods: {
            getHtml: function (text) {
                let result = md.render(text);
                return result;
            },
            setAction(data) {
                let own = this;
                if (data) {
                    if (typeof (data) == 'object') {
                        let markdown = data.content;
                        let title = data.title;
                        if (markdown) {
                            let content = own.getHtml(markdown);
                            own.action.content = content;
                            own.action.title = title;
                            own.action.markdown = markdown;
                        }
                    }
                }
            },
            loadAction(key) {
                if (key) {
                    let own = this;
                    http.get('action.get.by.key/' + key, null, function (data) {
                        own.setAction(data);
                    });
                }
            },
            loadIndex(key) {
                if (key) {
                    let own = this;
                    http.get('index.get.by.key/' + key, null, function (data) {
                        own.setAction(data);
                    });
                }
            }
        }
    };
    // contentComponent.mount('#content');

    const routes = [
        {name: 'content', path: '/', component: contentComponent}
    ];

    const router = VueRouter.createRouter({
        // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
    });

    const app = createApp({
        data: function () {
            return {
                showSearchClear: false,
                indexTree: [],
                actionTree: [],
                showList: [],
                searchText: '',
                indexFilter: null,
                actionFilter: null,
                menuIndexActives: indexActives,
                menuActionActives: actionActives,
                menuIndexExpands: indexExpands,
                menuActionExpands: actionExpands,
            };
        },
        computed: {
            text() {
                return this.getHtml(this.action.content);
            },
        },
        methods: {
            show: function () {
                this.visible = true;
            },
            hasText(action, texts) {
                let count = 0;
                let size = 0;
                if (action && texts) {
                    const key = (action.key ? action.key : '');
                    const title = (action.title ? action.title : '');
                    const path = (action.path ? action.path : '');
                    const fullPathTitle = (action.fullPathTitle ? action.fullPathTitle : '');
                    let array = [];
                    if (texts instanceof Array) {
                        array = texts;
                    } else {
                        array = texts.split(' ');
                    }

                    for (const text of array) {
                        if (text && text !== '') {
                            size++;
                            if (key.indexOf(text) >= 0) {
                                count++;
                            }
                            if (title.indexOf(text) >= 0) {
                                count++;
                            }
                            if (path.indexOf(text) >= 0) {
                                count++;
                            }
                            if (fullPathTitle.indexOf(text) >= 0) {
                                count++;
                            }
                        }
                    }
                }
                return count > 0 && count >= size;
            },
            onSearchChange() {
                const own = this;
                const text = this.searchText;

                if (text !== '') {
                    const texts = text.split(' ');
                    // 存在过滤文案，才启用过滤
                    this.indexFilter = (node) => {
                        const data = node.data;
                        const rs = own.hasText(data, texts);
                        // 命中的节点会强制展示
                        // 命中节点的路径节点会锁定展示
                        // 未命中的节点会隐藏
                        return rs;
                    };

                    this.actionFilter = (node) => {
                        const data = node.data;
                        const rs = own.hasText(data, texts);
                        // 命中的节点会强制展示
                        // 命中节点的路径节点会锁定展示
                        // 未命中的节点会隐藏
                        return rs;
                    };
                    this.showSearchClear = true;
                } else {
                    // 过滤文案为空，则还原 tree 为无过滤状态
                    this.indexFilter = null;
                    this.actionFilter = null;
                    this.showSearchClear = false;
                }
            },
            clearSearch() {
                this.searchText = '';
                this.showSearchClear = false;
                this.onSearchChange();
            },
            onModuleSelect(key, node) {
                if (node && node.node && node.node.data) {
                    const data = node.node.data;
                    if (data.action) {
                        let key = data.key;
                        this.routerPush(key, typeAction);
                    }
                }
            },
            onIndexSelect(key, node) {
                if (node && node.node && node.node.data) {
                    const data = node.node.data;
                    if (data.action) {
                        let key = data.key;
                        this.routerPush(key, typeIndex);
                    }
                }
            },
            handleFullPathTitle(node) {
                if (node) {
                    const own = this;
                    const superFullPathTitle = node.fullPathTitle ? node.fullPathTitle : node.title;
                    const children = node.children;
                    for (const child of children) {
                        const childTitle = child.title ? ('/' + child.title) : '';
                        child['fullPathTitle'] = superFullPathTitle + childTitle;
                        own.handleFullPathTitle(child);
                    }
                }
            },
            loadActionTreeRoot() {
                let own = this;
                http.get('module.tree.root', null, function (data) {
                    if (data) {
                        if (typeof (data) == 'object') {
                            if (data) {
                                for (const child of data) {
                                    own.handleFullPathTitle(child);
                                }
                            }
                            own.actionTree = data;
                        }
                    }
                });
            },
            loadIndexTreeRoot() {
                let own = this;
                http.get('index.tree.root', null, function (data) {
                    if (data) {
                        if (typeof (data) == 'object') {
                            if (data) {
                                for (const child of data) {
                                    own.handleFullPathTitle(child);
                                }
                            }
                            own.indexTree = data;
                        }
                    }
                });
            },
            routerPush(key, type) {
                if (key) {
                    this.$router.push({path: '/', query: {key: key, type: type}})
                }
            }
        },
        mounted() {
            let own = this;
            this.loadIndexTreeRoot();
            this.loadActionTreeRoot();
        }
    });
    app.use(highlight);
    app.use(TDesign);
    app.use(router);
    app.mount('#app');
</script>
<style>
    #app {
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }

    .t-tree__label {
        overflow: unset !important;
    }
</style>
</body>

</html>
